<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Jsaas</title>
<link rel="shortcut icon" href="/favicon.ico">
#@resources()
<link rel="stylesheet" href="#(ctx)/res/jsaas/css/index/index.css">
</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin" id = "app">
		<div class="layui-header">
			<div class="layui-logo"><i class="iconfont icon-saas"></i>&nbsp;&nbsp;Jsaas</div>
			<!-- <ul class="layui-nav layui-layout-left">
				<li class="layui-nav-item"><a href="">控制台<span class="layui-badge">9</span></a></li>
				<li class="layui-nav-item"><a href="">商品管理</a></li>
				<li class="layui-nav-item"><a href="">用户</a></li>
				<li class="layui-nav-item"><a href="#(ctx)/cache/clearCache?cachename=redis_common_cache">清除系统缓存</a>
					<dl class="layui-nav-child">
						<dd>
							<a href="">邮件管理</a>
						</dd>
						<dd>
							<a href="">消息管理</a>
						</dd>
						<dd>
							<a href="">授权管理</a>
						</dd>
					</dl></li>
			</ul> -->
			<ul class="layui-nav layui-layout-right">
				<li class="layui-nav-item"><a href="javascript:;"> <img
						src="http://t.cn/RCzsdCq" class="layui-nav-img"> #if(shiro.user()) #(shiro.principal()) #end
				</a>
					<dl class="layui-nav-child">
						<dd>
							<a href="">基本资料</a>
						</dd>
						<dd>
							<a href="">安全设置</a>
						</dd>
					</dl></li>
				<li class="layui-nav-item"><a href="#(ctx)/login/logout">退出登录</a></li>
			</ul>
		</div>

		<div class="layui-side layui-bg-black">
			<div class="layui-side-scroll">
				<!-- 左侧菜单栏  -->
				<ul class="layui-nav layui-nav-tree" lay-filter="test">
					#for(map : menus)
						<li class="layui-nav-item layui-nav-itemed"><a class="first-leve-menu" href="javascript:void(0);">
							<i class="iconfont #(map.value[0].menu_icon)"></i>&nbsp;&nbsp;&nbsp;#(map.key)</a>
							<dl class="layui-nav-child">
							#for(submenu : map.value)
								<dd>
									<a class="a-menu" menu_no = "#(submenu.submenu_no)" menu_url = "#(submenu.submenu_url)" menu_name = "#(submenu.submenu_name)" href="javascript:void(0);"><i class="iconfont #(submenu.submenu_icon)"></i>&nbsp;&nbsp;&nbsp;#(submenu.submenu_name)</a>
								</dd>
							#end
							</dl>
						</li>
					#end
					<!-- <li class="layui-nav-item layui-nav-itemed"><a class = ""
						href="javascript:;">所有商品</a>
						<dl class="layui-nav-child">
							<dd>
								<a href="">超链接</a>
							</dd>
							<dd>
								<a href="">超链接</a>
							</dd>
							<dd>
							   <a href="">超链接</a>
							</dd>
							<dd>
								<a href="">超链接</a>
							</dd>
						</dl></li> -->
				</ul>
			</div>
		</div>
		
		<div class="layui-body">
			<!-- 内容主体区域 -->
			<div id="menuTab" class="layui-tab layui-tab-brief" style="height: 97%;"
				 lay-filter="menuTab" >
				<ul class="layui-tab-title">
					<li class="layui-this">首页</li>
				</ul>
				<div class="layui-tab-content">
					<div class="layui-tab-item layui-show"  >
						<!-- <iframe class="tab-iframe" src="#(ctx)/permission" frameborder="0" scrolling="auto" > </iframe> -->
					</div>
				</div>
			</div>
		</div>
		
		<div class="layui-footer">
			<!-- 底部固定区域 -->
			© layui.com - 底部固定区域
		</div>
	</div>
	<script type="text/javascript">
		var tabFilter = "menuTab";
		var element = null;
		layui.use(['element', 'layer'], function(){
			element = layui.element;
		  	//点击菜单
		  	$(".a-menu").click(function(e){
		  		var menu_no = $(this).attr("menu_no");
		  		//是否已经打开对应的菜单 如果已经打开则直接切换菜单
		  		if($("#menuTab li[lay-id='"+menu_no+"']").length > 0){
		  			element.tabChange("menuTab", menu_no);
		  			return;
		  		}
		  		//添加tab选项卡
		  		var menu_url = $(this).attr("menu_url");
		  		var menu_name = $(this).attr("menu_name");
		  		var iframe = '<iframe class="tab-iframe" id="iframe_'+menu_no+'" src="'+ ctx + menu_url +'" frameborder="0" scrolling="auto" > </iframe>';
		  		element.tabAdd(tabFilter, {
					  title: menu_name
					  ,content: iframe //支持传入html
					  ,id: menu_no
				});
		  		element.tabChange(tabFilter, menu_no);
		  	});
		  	
		  	//tab右键菜单
		  	$("#menuTab").on("contextmenu", ".layui-tab-title li", function(e){
		  		var obj = $(this);
		  		var offset = obj.offset();  
		  		var layId = obj.attr("lay-id");
		  		var content = '<ul class="contextmenu" >';
		  		content += '<li onclick="closeTab(\''+layId+'\')"><i class="iconfont icon-guanbi"></i>关闭</li>';
		  		content += '<li onclick="closeOther(\''+layId+'\')"><i class="iconfont icon-guanbiqita"></i>关闭其他</li>';
		  		content += '<li onclick="closeAll()"><i class="iconfont icon-guanbisuoyouchuangkou"></i>关闭所有</li>';
		  		content += '<li onclick="reloadTab(\''+layId+'\')"><i class="iconfont icon-shuaxin"></i>刷新</li></ul>'
		  		layer.open({
		  		  type: 1,
		  		  title:false,
		  		  skin: 'layui-layer-demo', //样式类名
		  		  closeBtn: 0, //不显示关闭按钮
		  		  offset: [offset.top + 20, offset.left + 50],
		  		  shadeClose: true, //开启遮罩关闭	
		  		  content: content
		  		});
		  		element.tabChange(tabFilter, layId);
		  		return false;//屏蔽浏览器右键菜单
		  	});
		
		  	
		});
		
		//关闭选项卡
		function closeTab(layId){
	  		layer.close(layer.index);
	  		element.tabDelete(tabFilter, layId);
	  	}
		//刷新选项卡页面
		function reloadTab(layId){
			layer.close(layer.index);
			var $iframe = document.getElementById("iframe_" + layId);
			if($iframe){
				$iframe.contentWindow.location.reload(true);
			}
		}
		//关闭其他
		function closeOther(layId){
			layer.close(layer.index);
			//获取所有的tab
			var allTablis = $("#menuTab").find(".layui-tab-title li");
			$.each(allTablis, function(i, tabObj){
				var removeId = $(tabObj).attr("lay-id");
				if(layId != removeId){
					element.tabDelete(tabFilter, removeId);
				}
			});
		}
		//关闭所有选项卡
		function closeAll(){
			layer.close(layer.index);
			//获取所有的tab
			var allTablis = $("#menuTab").find(".layui-tab-title li");
			$.each(allTablis, function(i, tabObj){
				element.tabDelete(tabFilter, $(tabObj).attr("lay-id"));
			});
		}
		
	</script>
</body>
</html>

